<template>
    <div>
        <!-- <h3>角色管理</h3> -->
        <!-- 查询 -->
        <div>
            <el-form :inline="true" :v-model="role" class="demo-form-inline">
                <el-form-item label="角色名称:">
                    <el-input v-model="role.roleName" placeholder="角色名称" size="small"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="queryRoleList" size="small">查询</el-button>
                    <el-button icon="el-icon-search" @click="redirectRoleList" size="small">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
         <!-- 按钮 -->
        <div>
            <el-button type="primary" icon="el-icon-plus" @click="showEditDialog" size="small">添加</el-button>
            <!-- <el-button type="primary" icon="el-icon-bottom" size="small">导入</el-button>
            <el-button type="primary" icon="el-icon-top" size="small">导出</el-button> -->
            <!-- <el-button type="primary" v-show="deleteMore" icon="el-icon-delete-solid" @click="deleteMoreBotton" size="small">批量删除</el-button> -->
        </div>
        <!-- 表格 -->
        <div>
            <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="roleId" label="#"/>
                <el-table-column prop="roleName" label="角色名称"/>
                <el-table-column prop="roleDescribe" label="角色描述" show-overflow-tooltip/>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <!-- 分配功能 -->
                        <el-button type="info" icon="el-icon-edit-outline" size="mini" @click="configMenu(scope.row)">分配功能</el-button>
                        <!-- 修改 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <!-- 删除 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.roleId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <Page
            @on-change="queryRoleList"
            :total="total"
            show-total
            :page-size="pageSize"
            style="float:right"/>
        </div>
        <!-- 修改删除 -->
        <div>
            <el-dialog :title="uORiText" :visible.sync="updateFormVisible" :before-close="handleClose">
                <el-form :v-model="updateform" :inline="true" >
                    <el-form-item label="角色名称" style="margin: 0 0 30px 30px;">
                        <el-input v-model="updateform.roleName" autocomplete="off" size="medium"/>
                    </el-form-item>
                    <el-form-item label="角色描述" style="margin: 0 0 30px 30px;">
                        <el-input type="textarea" v-model="updateform.roleDescribe" autosize/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertUpdateForm">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 编辑功能权限 -->
        <div>
            <el-dialog title="编辑角色权限" :visible.sync="updateFormVisiblePerm" :before-close="handleCloseTable">
                <el-tree
                v-loading="loading"
                :data="data"
                show-checkbox
                default-expand-all
                check-on-click-node
                :default-checked-keys="permId"
                node-key="permId"
                ref="tree"
                :props="defaultProps">
                </el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisiblePerm = false">取 消</el-button>
                    <el-button type="primary" @click="updateFormPerm">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import axios from "axios"
import qs from "qs"
export default {
    data(){
        return{
            // 条件
            role:{
                roleName:'',
            },   
            // 加载数据
            loading:false,
            // 表格数据
            tableData:[],
            // 分页
            total: 0,
            pageSize: 6,
            currentPage: 0,
            // 修改/删除
            updateFormVisible: false,
            updateform:{
                roleId:'',
                roleName:'',
                roleDescribe:'',
            },
            uORiText:'',
            // 修改角色权限
            updateFormVisiblePerm: false,
            //   ---树形图
            data:[],
            permId:[],
            defaultProps: {
                children: 'children',
                label: 'permName'
            },
            roleId: 0,

        };
    },
    created(){
        this.queryRoleList();
    },
    methods:{
        // 查询全部 -- 条件分页
        queryRoleList(currentPage){
            this.loading=true;
            if(currentPage!=null){
                if(isNaN(currentPage)){
                    this.currentPage = 1;
                }else{
                    this.currentPage = parseInt(currentPage);
                }
            }else{
                this.currentPage = 1;
            }
            axios.get("http://localhost:8082/role/getAllRole?roleName="+this.role.roleName+"&index="+this.currentPage+"&pageSize="+this.pageSize).then(res=>{
                console.log(res)
                this.total = res.data.tocal;
                this.tableData = res.data.list;
                this.loading = false;
            })
        },
        // 重置条件
        redirectRoleList(){
            this.role.roleName='';
            this.queryRoleList(1);
        },
        // 批量选择
        handleSelectionChange(){},
        // 编辑 / 添加
        showEditDialog(row){
            console.log(row)
            this.updateFormVisible = true;
            if(row.roleId!=null){
                this.uORiText = '编辑';
                this.updateform.roleId=row.roleId
                this.updateform.roleName = row.roleName;
                this.updateform.roleDescribe = row.roleDescribe;
            }else {
                this.uORiText = '添加';
                this.updateform = {};                
            }

        },
        // 编辑 / 添加保存
        insertUpdateForm(){
            if(this.uORiText=='编辑'){
                axios.post("http://localhost:8082/role/updateByRole",this.updateform).then(res=>{
                    if(res.data=='ok'){
                        this.queryRoleList();
                        this.updateFormVisible = false;
                        this.$message.success("编辑成功");
                    }else{
                        this.$message.error("编辑失败");
                    }
                })
            }else{
                axios.post("http://localhost:8082/role/insertByRole",this.updateform).then(res=>{
                    if(res.data=='ok'){
                        this.queryRoleList();
                        this.updateFormVisible = false;
                        this.$message.success("添加成功");
                    }else{
                        this.$message.error("添加失败");
                    }
                })
            }
        },
        // 删除
        deleteUser(roleId){
            axios.get("http://localhost:8082/role/deleteByid?id="+roleId).then(res=>{
                if(res.data=='ok'){
                    this.queryRoleList();
                    this.$message.success("删除成功");
                }else{
                    this.$message.error("删除失败");
                }
            })
        },
        // 编辑配置功能
        configMenu(row){
            // 树形图加载
            this.treeData(row.roleId);
            this.updateFormVisiblePerm = true;
        },
        // 查询树形图数据
        treeData(roleId){        
            this.loading = true;
            this.roleId = roleId,
            this.permId =[],
            axios.get("http://localhost:8082/perm/menusAll?roleId="+roleId).then(res=>{
                console.log(res)
                this.data = res.data.perm
                this.permId = res.data.permId
                console.log(this.permId)
            })
            this.loading = false;
        },
        // 修改角色权限 -- 保存按钮
        updateFormPerm(){
            const num = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) ;
            console.log("返回的树形图：")
            console.log(num)
            axios.post("http://localhost:8082/role/updateByids",{ids:num,roleId:this.roleId}).then(res=>{
                if(res.data=='ok'){
                    this.queryRoleList();
                    this.$message.success("编辑成功");
                }else{
                    this.$message.error("编辑失败");
                }
                console.log(res)

            })
        },
        // 修改添加 -- 关闭按钮
        handleClose(){
            this.updateFormVisible = false
        },
        // 修改角色权限 -- 关闭按钮
        handleCloseTable(){
            this.updateFormVisiblePerm= false;
        },
    }
    
}
</script>
<style lang="less" scoped>

</style>